<template>
	<template v-slot:gBody>
		<view class="hulu-circle-card-body">
			<view class="hulu-circle-card-header">
				<view class="hulu-circle-card-title">
					<slot>
						推荐热门圈子
					</slot>
				</view>
			</view>
			<scroll-view class="gui-scroll-view-body" :scroll-y="true" :show-scrollbar="false"
				:style="{height:mainHeight+'px'}" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"
				@scrolltolower="loadmorefun" @scroll="scroll">

				<gui-refresh @reload="reload" ref="refreshcom"></gui-refresh>
				<view class="hulu-circle-card-container" v-for="(g,index) in groupList" :key="index" @tap="toRun(g)">
					<view class="hulu-circle-card-layout">
						<view class="hulu-circle-card-top">
							<view class="hulu-circle-card-img">
								<image class="hulu-circle-card-img-pic" :src="g.logo" mode=""></image>
							</view>
							<view class="hulu-circle-card-content">
								<view class="hulu-circle-card-content-title">
									{{g.name}}
								</view>
								<view class="hulu-circle-card-content-title">
									{{g.slogan}}
								</view>
								<view class="hulu-circle-card-content-subtitle">
									{{g.description}}
								</view>
							</view>
						</view>
						<view class="hulu-circle-card-bottom">
							<view class="line">

							</view>
							<view class="tips">
								<view class="launch">
									{{g.user?g.user.name:""}}
								</view>
								<view class="people">
									<text class="gui-icons">&#xe611;</text>
									<text>{{g.join_count}}人</text>
								</view>
							</view>

						</view>
					</view>
				</view>
				<!-- 加载组件 -->
				<gui-loadmore ref="loadmorecom" :status="1"></gui-loadmore>
			</scroll-view>
		</view>
	</template>
</template>

<script>
	import request from '@/api/request.js'
	import graceJS from '@/Grace6/js/grace.js';
	export default {
		props: {
			keywords: {
				type: String,
				default: ""
			},
			user_id: {
				type: Number,
				default: null
			},
			inner: {
				type: Boolean,
				default: false
			}
		},
		mounted: function() {
			console.log("hulu-group--user_ID", this.user_id)
			this.getdata();
		},
		emits: ['update:keywords'],
		data() {
			return {
				// 滚动区域滚动距离
				scrollTop: 0,
				// 核心数据
				groupList: [],
				loadMoreTimer: null,
				// 用于记录是否有 api 请求正在执行
				apiLoadingStatus: false,
				mainHeight: 410,
				page: 1,
				hiskeywords: ""
			}
		},

		methods: {
			toRun(g) {
				uni.navigateTo({
					url: `/subpage/startrun/startrun?group_id=${g.id}`
				})
			},
			scroll: function(e) {
				this.scrollTop = e.detail.scrollTop;
			},
			// 下拉刷新相关事件绑定
			touchstart: function(e) {
				if (this.apiLoadingStatus) {
					return;
				}
				if (this.scrollTop > 10) {
					return;
				}
				this.$refs.refreshcom.touchstart(e);
			},
			touchmove: function(e) {
				if (this.apiLoadingStatus) {
					return;
				}
				if (this.scrollTop > 10) {
					return;
				}
				this.$refs.refreshcom.touchmove(e);
			},
			touchend: function(e) {
				if (this.apiLoadingStatus) {
					return;
				}
				if (this.scrollTop > 10) {
					return;
				}
				this.$refs.refreshcom.touchend(e);
			},
			// 刷新事件
			reload: function() {
				if (this.apiLoadingStatus) {
					return;
				}
				this.page = 1;
				this.getdata(true);
				// 刷新时重置加载组件状态
				this.$refs.loadmorecom.stoploadmore();
			},
			// 加载更多事件
			loadmorefun: function() {

				if (this.apiLoadingStatus) {
					return;
				}
				// 保证触底只执行一次加载
				if (this.loadMoreTimer != null) {
					clearTimeout(this.loadMoreTimer);
				}
				this.loadMoreTimer = setTimeout(() => {
					// 校验加载组件状态
					if (this.$refs.loadmorecom.loadMoreStatus != 0) {
						return;
					}
					this.$refs.loadmorecom.loading();
					// 此处开启加载动画执行加载数据的函数
					this.getdata();
				}, 80);
			},
			// 数据加载函数
			// isReload 函数用于识别是不是下拉刷新执行的
			getdata: async function(isReload) {
				this.apiLoadingStatus = true;
				let uid = this.user_id
				if (uid == null) {
					uid = ""
				}
				//如果存在keywords把page置1
				let url = ""
				if (this.keywords != "") {
					if (this.keywords != this.hiskeywords) {
						console.log('不相同')
						this.page = 1
					}
					url = `group?page=${this.page}&keywords=${this.keywords}&user_id=${uid}&inner=${this.inner}`
					this.hiskeywords = this.keywords
				} else {
					if (this.hiskeywords != "" && this.page > 1) {
						this.page = 1
						this.hiskeywords = ""
					}
					url = `group?page=${this.page}&user_id=${uid}&inner=${this.inner}`
				}

				// keyword状态的变化，从无到有，从有到无，给定一个keywords，hiskeywords记录上一次关键词，默认为空，每次出现时将keywords与hiskeywords进行比较，如果不匹配，清空数据，并将page置为1。
				// 发送网络请求后，再将keywords赋值给hiskeywords

				//场景一：不带keywords
				const {
					data
				} = await request.get(url)
				// 对演示数据随机刷新模拟数据刷新
				if (this.page >= 2) {
					this.groupList = this.groupList.concat(data);
					// 加载完成后停止加载动画
					this.$refs.loadmorecom.stoploadmore();
					// 假定第3页加载了全部数据，通知组件不再加载更多
					// 实际开发由接口返回值来决定
					if (data.length == 0) {
						this.$refs.loadmorecom.nomore();
					}
				}
				// 第一页 有可能是第一次加载或者刷新
				else {
					this.groupList = [];
					this.groupList = data
					this.pageLoading = false;
					// 刷新
					if (isReload) {
						this.$refs.refreshcom.endReload();
					}
					// 加载完成后停止加载动画
					this.$refs.loadmorecom.stoploadmore();
				}


				this.page++;
				this.apiLoadingStatus = false;
				// 场景二：带keywords

			}
		},
		expose: ["getdata"]

	}
</script>



<style lang="scss">
	.hulu-circle-card-body {
		.hulu-circle-card-header {
			display: flex;
			font-size: 36rpx;
		}

		.hulu-circle-card-container {
			margin-top: 20rpx;

			.hulu-circle-card-layout {
				background-color: white;
				box-shadow: 0px 3px 15px rgba(0, 34, 81, 0.05);
				border-radius: 20rpx;

				.hulu-circle-card-top {
					display: flex;
					padding: 40rpx 40rpx 0 40rpx;

					.hulu-circle-card-img {
						width: 96rpx;
						height: 96rpx;

						.hulu-circle-card-img-pic {
							width: 96rpx;
							height: 96rpx;
							border-radius: 12rpx;
						}
					}

					.hulu-circle-card-content {
						margin-left: 20rpx;
						display: flex;
						justify-content: center;
						flex-direction: column;

						.hulu-circle-card-content-title {
							color: #002150;
							font-size: 32rpx;
						}

						.hulu-circle-card-content-subtitle {
							margin-top: 10rpx;
							font-size: 24rpx;
							color: rgba(122, 134, 154, 1);
						}
					}
				}

				.hulu-circle-card-bottom {
					margin-left: 116rpx;
					padding-top: 12rpx;
					padding-bottom: 20rpx;
					padding-left: 40rpx;
					padding-right: 40rpx;
					display: flex;
					flex-direction: column;
					justify-content: stretch;

					.line {
						width: auto;
						height: 2rpx;
						margin-bottom: 12rpx;
						background-color: #e3e5e8;
					}

					.tips {
						display: flex;
						color: rgba(122, 134, 154, 1);
						font-size: 24rpx;
						justify-content: space-between;
						align-items: center;
					}
				}
			}
		}
	}
</style>